<template>
  <div>
    <h2>歌单</h2>
    <div>
       姓名:<input type="text" v-model="name">
       年龄:<input type="text" v-model="age">
       工作<input type="text" v-model="job">
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name:'GeDanComponent',
  data(){
    return{
      name:'',
      age:0,
      job:''
    }
  },
  /*
    进入组件的守卫
  */
  // beforeRouteEnter:(to,from,next)=>{
  //   Vue.prototype.$message.warning("该模块正在开发中")
  // }
  /**
   * 离开组件的守卫
   * 在使用离开组件内守卫的时候，如果在此函数中要使用this指向，这里不要使用箭头函数
   * 如果使用箭头函数的写法，那么就会出现this为undefined的问题，建议大家使用普通函数
   * 的写法
   */
  beforeRouteLeave(to,from,next){
    console.log('-------离开该组件---------');
    console.log(this);
    // if(this.name==""||this.age==0||this.job==""){
    //    this.$message.warning('您的表单信息还没有完善，是否决定离开')
    // }else{
    //   next()
    // }
  }
}
</script>

<style>

</style>